<html>
<head>
<script language="javascript" src="js/jquery-1.2.6.js" type="text/javascript">;</script>
<script language="javascript" type="text/javascript">

var methods = Array();
var resources = Array();
var id = 0;

var newId = function() { 
  return id++; 
}

var escape = function(string) {
  string = string.replace(/</g, "&lt;");
  string = string.replace(/>/g, "&gt;");
  return string;
}

var htmlResource = function(resource) {
  var id = newId();
  resources[id] = resource;
  var html = "";
  html += "<tr>";
  html += "<td id='" + id + "-resource' class='resource'>" + resource.name + "</td>";
  html += "</tr>";
  return html;
}

var htmlResources = function(resources) {
  var html = "";
  html += "<table padding='0' spacing='0'>";
  for(var index in resources) html += htmlResource(resources[index]);
  html += "</table>";
  return html;
}

var htmlMethod = function(method) {
  newId();
  methods[id] = method;
  var html = "";
  html += "<tr>";
  html += "<td id='" + id + "-method' class='method'>";
  html += method.verb + " " + escape(method.pattern) + "<div class='little'>" + method.description + "</div>";
  html += "<div id='" + id + "-method-documentation' class='method-documentation'></div>";
  html += "</td>";
  html += "</tr>";
  return html;
}

var htmlMethods = function(methods) {
  var html = "";
  html += "<table padding='0' spacing='0'>";
  for(var index in methods) html += htmlMethod(methods[index]);
  html += "</table>";
  return html;
}

var renderResources = function(resources) {
  $("#resources").append(htmlResources(resources));
}

var renderMethods = function(methods) {
  $("#methods").append(htmlMethods(methods));
  $(".method").click(showMethodDocumentation);  
}

var clean = function(string) {
  string = string.replace(/\//g, "_");
  string = string.replace(/</g, "");
  string = string.replace(/>/g, "");
  return string;
}

var htmlDocument = function(document)
{
  var html = "";
  html += "<h3>Request</h3>";
  html += "<h3>Response</h3>";
  html += "<h3>Signature</h3>";
  html += "<p>" + document["signature"] + "</p>";
  return html;
}

var renderDocument = function(methodDocumentationId, document) {
  $("#"+methodDocumentationId).html(htmlDocument(document));
}

var renderHtmlDocument = function(methodDocumentationId, htmlDocument) {
  $("#"+methodDocumentationId).html(htmlDocument);
  $("#"+methodDocumentationId).show();
}

var showMethodDocumentation = function() {
  var methodId = this.id.replace("-method", "");
  var method = methods[methodId];
  var methodDocumentationId = methodId + "-method-documentation";
  var methodDocumentationUri = "/protocol/documents/" + method.verb + clean(method.pattern) + ".json";
  var methodDocumentationUri = method.verb + clean(method.pattern) + ".jsp";
  $.get(methodDocumentationUri, "", function(document) {
     renderHtmlDocument(methodDocumentationId, document);
  }, "html");  	  
  $(this).unbind("click");
  $(this).click(hideMethodDocumentation);  
}

var hideMethodDocumentation = function() {
  var methodId = this.id.replace("-method", "");
  var method = methods[methodId];
  var methodDocumentationId = methodId + "-method-documentation";
  $("#"+methodDocumentationId).hide();
  $(this).unbind("click");
  $(this).click(showMethodDocumentation);  
}

$(document).ready(function() {
  $.get("protocol/resources.json", "", function(resources) {
     renderResources(resources);
  }, "json");  	  
  
  $.get("protocol/methods.json", "", function(methods) {
    renderMethods(methods);
  }, "json");
});

</script>
<style>
body, td {
  font-familiy: verdana;
  font-size: 14px;
}

.little {
  font-family: verdana;
  font-size: 11px;
}
</style>
</head>
<body>
  <h2>Resources</h2>
  <div id="resources"></div>
  
  <h2>Methods</h2>
  <div id="methods"></div>
</body>
</html>